<template>
  <div>
    <input type="digit" v-model="bmi" placeholder="输入bmi数显示">
    <div class="content">
      
      <span class="cursor-msg" :style="'left:' + (per-10) + '%'">您的BMI指数为{{bmi}}</span>
      <div class="step">
        <div class="cursor" :style="'left:' + per + '%'"></div>
        <div class="item step1"><span>15</span></div>
        <div class="item step2"><span>18.5</span></div>
        <div class="item step3"><span>25</span></div>
        <div class="item step4"><span>30</span></div>
        <div class="item step5"><span>40</span></div>
      </div>
        
    </div>

    <wux-popover placement="topLeft" title="Title" content="Content">
      <button size="mini">topLeft</button>
    </wux-popover>

    <wux-popover placement="topRight" title="Title" content="Content">
      <button size="mini">topRight</button>
    </wux-popover>

  </div>
</template>

<script>

export default {
  components: {
    
  },
  data() {
    return {
      bmi: 18.5
    }
  },
  computed: {
    per () {
      if (this.bmi > 40 || this.bmi < 15) return -100
      return ((Math.abs(this.bmi - 15)/25)*100)
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  margin: 100rpx 50rpx;
  position: relative;
  .cursor-msg {
    position: absolute;
    left: 20%;
    top: -100%;
    margin: 10rpx;
    height: 50rpx;
  }
}
.step {
  display: flex;
  height: 80rpx;
  position: relative;
  border-radius: 50rpx;
  // overflow: hidden;
  // margin: 0 50rpx;
  .item {
    // background-color: #ccc;
    align-items: center;
    position: relative;
    border: 1rpx solid #dbdbdb;
    &:last-child{
      border: none;
    }
    span {
      position: absolute;
      left: -20rpx;
      bottom: -50rpx;
      color: #888;
      font-size: 30rpx;
    }
  }
  .step1 {
    // flex: 7;
    width: 14%;
    // background-color: #57c9c9;
    background: linear-gradient(#6bd9db, #4abebe);
    border-radius: 50rpx 0 0 50rpx;
  }
  .step2 {
    // flex: 15;
    width: 25.5%;
    // background-color: #b8db56;
    background: linear-gradient(#cae365, #a7d346);
  }
  .step3 {
    // flex: 10;
    width: 19.5%;
    // background-color: #fece01;
    background: linear-gradient(#ffdd00, #feca03);
  }
  .step4 {
    flex: 1;
    // flex: 20;
    // width: 38.5%;
    // background-color: #fa8d76;
    background: linear-gradient(#fea086, #f57660);
    border-radius: 0 50rpx 50rpx 0;
  }
  .cursor {
    position: absolute;
    left: 0%;
    z-index: 99;
    width: 5rpx;
    height: 80rpx;
    // border-right: 5rpx solid #0081ff;
    background-color: #666;
    // opacity: 0.6;
    // border-radius: 50rpx 0 0 50rpx;
    transition: left 0.5s, width 0.5s;
  }
  
}

</style>
